<template>
  <div id="platformDetailBox" :class="cid?'topHead':''">
      <TopBar v-if="cid">平台详情</TopBar>
      <div id="platformHeader"  style="margin-top:.3rem">
        <div id="imgBox">
          <img :src="item.logo">
        </div>
        <div id="platformInfoBox">
          <h3 v-text="item.name" style="font-size:0.48rem"></h3>
          <span v-text="item.desc"></span>
        </div>
        <div id="platformTagsBox">
          <Tag v-show="!lcType||lcType != 'bx'" :tag="item" v-for="item in item.tags" :key="item.id" style="margin-left:.05rem"></Tag>
        </div>
      </div>
      <div id="platformContent" >
        <div id="contentLess" v-if="!showMore">
          <div id="platformContentRow1" class="vux-1px">
            <div>
              <div style="color:#dd3930">
                <span class="yearRate">{{this.item.yqnh_min}}</span>%<span class="yearRate" style="margin-right:.1rem">~</span><span class="yearRate">{{this.item.yqnh_max}}</span>%
              </div>
              预期年化
            </div>
            <div v-if="item.zgfl != 0">
              <div style="color:#000">
                <div v-if="item.type == '2'">
                  <span class="otherTwo" >{{this.item.zgfl}}</span>%
                </div>
                <div v-else>
                  <span class="otherTwo" >{{this.item.zgfl}}</span>元
                </div>
              </div>
              最高返利
            </div>
            <div>
              <div v-text="item.fxdj" class="otherTwo" v-if="item.fxdj != ''"></div>
              <div class="otherTwo" v-else>&nbsp;</div>
              <span>平台等级</span>
            </div>
          </div>
          <div @click="showInfo" id="downArrow" class="vux-1px-r vux-1px-b"></div>
        </div>
        <div id="contentMore" v-if="showMore">
          <div id="platformContentRow1" class="vux-1px">
            <div>
              <div style="color:#dd3930">
                <span class="yearRate">{{this.item.yqnh_min}}</span>%<span class="yearRate" style="margin-right:.1rem">~</span><span class="yearRate">{{this.item.yqnh_max}}</span>%
              </div>
              预期年化
            </div>
            <div v-if="item.zgfl != 0">
              <div style="color:#000">
                <div v-if="item.type == '2'">
                  <span class="otherTwo" >{{this.item.zgfl}}</span>%
                </div>
                <div v-else>
                  <span class="otherTwo" >{{this.item.zgfl}}</span>元
                </div>
              </div>
              最高返利
            </div>
            <div>
              <div v-text="item.fxdj" class="otherTwo" v-if="item.fxdj != ''"></div>
              <div class="otherTwo" v-else>&nbsp;</div>
              <span>平台等级</span>
            </div>
          </div>
          <TableContent :item="item"></TableContent>
          <div  @click="showInfo" id="upArrow" class="vux-1px-r vux-1px-b"></div>
        </div>
    </div>
    <div style="margin-top:.2rem;height:0.2667rem;background-color:#f5f5f5;"></div>
    <Title title="投资产品" v-show="cid"></Title>
    <div id="centerContetn" v-show="cid">
      <RecommendItem type="productDetail" :key="item.id" :item="item" v-for="item in item.cplist" style="margin-bottom:.2rem;"></RecommendItem>
    </div>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import Tag from '../../component/common/Tag'
import Title from '../../component/common/Title'
import RecommendItem from '../../component/common/RecommendItem'
import TableContent from '../../component/common/TableContent'
import {ptDetail} from '../../../service/getData.js'
import {getStore,setStore} from '../../../config/mUtils.js'
import { querystring } from 'vux'
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    TopBar,
    Tag,
    Title,
    RecommendItem,
    TableContent
  },
  beforeCreate(){
      getSDK()
    },
  props:['ptid','lc_type'],
  created(){
    var cid = querystring.parse()['cid']//TODO:获取
    this.cid = cid
    if(cid){
      this.id = cid
      setStore('cid',cid)

      ptDetail(cid)
        .then(res=>{
          // console.log(res)
          this.item = res.info
        })
    }
  },
  watch:{
    ptid(){
      // console.log(this.ptid);
      ptDetail(this.ptid)
        .then(res=>{
          // console.log(res.info)
          this.item = res.info
        })
    },
    lc_type(){
      this.lcType = this.lc_type
    }
  },
  data(){
    return {
      showMore:false,
      item:{},
      id:'',
      cid:'',
      fromSearch:false,
      lcType:this.lc_type
    }
  },
  methods:{
    showInfo(){
      this.showMore = !this.showMore
    }
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

    .topHead{
      padding-top: 1.2rem
    }
  #platformDetailBox{
    #platformHeader{
      display: flex;
      flex-direction: row;
      width: 9.2rem;
      margin: 0 auto;
      #imgBox{
        width: 1.3333rem;
        height: 1.3333rem;
        border-radius: 50%;
        background-color: #f1f1f1;
        .fx();
        img{
          width: 1.0667rem;
          height: 0.3467rem;
        }
      }
      #platformInfoBox{
        width: 3.9rem;
        margin-left: 0.2667rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span{
          color: #939393;
          font-size: 0.3467rem;
          width:7.5rem
        }
      }
      #platformTagsBox{
        display: flex;
        flex-direction: row;
        position: absolute;
        right: 5%;
        padding-top: .1rem;
        justify-content: space-between;
      }
    }
    #platformContent{
      // height: 2.7467rem;
      margin: 0 auto;
      margin-top: 0.4267rem;
      width: 9.2rem;
      // background-color: burlywood;
      #platformContentRow1{
        height: 2.0533rem;
        color: #939393;
        font-size: 0.32rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding-left: .3rem;
        margin-bottom: .2rem;
        .yearRate{
          color: #dd3930;
          font-size: 0.6rem;
          font-weight: bold;
        }
        div:nth-child(2){
          margin: 0 0.3rem;
          font-size: 0.32rem
        }
        .otherTwo{
          color: #000;
          font-size: 0.6rem;
          font-weight: bold;
        }
      }
      #downArrow,#upArrow{
        width: .3rem;
        height: .3rem;
        margin: 0 auto;
        margin-top: .1rem;
        border-bottom: 2px solid #f1f1f1;
        border-right: 2px solid #f1f1f1;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
      }
      #upArrow{
        transform: rotate(225deg);
        -webkit-transform: rotate(225eg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        margin-top: .3rem;
      }
    }
    #centerContetn{
      width: 9.2rem;
      margin: 0 auto;
    }
  }
</style>
